<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>积分商品列表</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<style type="text/css">
			.newproduct {
			height: 2.65rem;

			border-bottom: .05rem solid rgba(238, 238, 238, 0.5);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 0.75rem;
			margin-top: 0.3rem;
		}

		.new_wraper {
			padding-left:0.75rem;padding-right:0.75rem;
		}

		.newproduct_left {
			background: url();
			background-repeat: no-repeat;
			background-size: auto 0.8rem;
			background-position: left center;
			padding-left: 10px;
			display: inline-block;
			font-size: 0.85rem;
			font-family: PingFangSC-Semibold;
			font-weight: 600;
			color: rgba(51, 51, 51, 1);
		}

		.newproduct_right span {
			font-size: 0.65rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}

		.newproduct_list {
			/*height: 6.75rem;*/
			background: rgba(255, 255, 255, 1);
            padding:0.5rem;
			box-sizing: border-box;

			margin-top:0.5rem;
			border-radius:0.4rem

		}

		.left_img {
			width: 5rem;
			margin-right: 0.75rem;
		}

		.left_img img {
			width: 5rem;
			width:5rem;
			border-radius: 0.2rem;
		}

		.right_cont {



		}

		.top_title {

		}

		.top_title img {
			width: 1.6rem;
			height: 0.9rem;
			display: inline-block;
			transform: translateY(0.15rem);
			margin-right: 0.2rem;
		}

		.top_title {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: #222222;
			line-height: 1.1rem;
			max-height: 2.2rem;
			display: inline-block;
			font-size:0.75rem
		}

		.title {
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;

		}

		.mid_decri {
			/*display: flex;*/
		}

		.mid_decri_item {
			padding: 0 0.1rem;
			height: 0.8rem;
			line-height: 0.8rem;
			border-radius: 0.1rem;
			border:0.03rem solid #005A93;
			background:rgba(239,249,255,0.4);
			font-size: 0.5rem;
			border-radius: 0.1rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color:#005A93;
			/*text-align: center;*/
			float: left;
			margin-top: 0.3rem;
			margin-right: 0.25rem;
			margin-bottom: 0.4rem;
			padding-top: 0.010rem;
		}

		.clear {
			clear: both;
		}

		.now_price {
			font-size: 1.1rem;
			font-family: 'PingFangSC-Semibold';
			font-weight: 600;
			color: rgba(255, 102, 66, 1);
			line-height: 1rem;
		}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class=""  style="">
				<div class="new_wraper" v-if="info.length">
					<div class="newproduct_list flex-box-x" v-for="(vo, index) in info" tapmode @click="openWin_score_detail(vo.id)">
						<div class="left_img">
							<img :src="vo.cover" alt="">
						</div>
						<div class="right_cont col-xs-x">
							<div class="top_title title" style="">
								<!-- <img v-if="vo.sign == '新品'" src="../../image/icon/xinpin.png" alt=""> -->
								<!-- <img v-if="vo.sign == '秒杀'" src="../../image/icon/miaosha.png" alt=""> -->
								<!-- <img v-if="vo.sign == '精品'" src="../../image/icon/tuijian.png" alt="">
								<img v-if="vo.sign == '热销'" src="../../image/icon/qingcang.png" alt="">
								<img v-if="vo.sign == '拼团'" src="../../image/icon/pintuan.png" alt="">
								<img v-if="vo.sign == '秒杀'" src="../../image/icon/miaosha.png" alt=""> -->
								{{vo.title}}
							</div>
							<div class="mid_decri" v-for="item in vo.service_name">
								<div class="mid_decri_item">{{item}}</div>
							</div>
							<section class="clear"></section>

							<div  style="margin-top:0.35rem">
									<span class="" style="font-size: .7rem;color:#E90000;"><span class="" style="font-size:0.9rem;color:#E90000;line-height:1.35rem;">{{vo.score_price}}积分</span></span>
									<span style="color:rgba(153,153,153,.7);font-size: .65rem;font-weight:400;">已兑换{{vo.sold_num}}件</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div v-if="info.length<1" class="aui-text-center" style="margin-top: 40%;">
				<img src="../../image/bg/bg-nomessage.png" style="margin-left:50%;transform:translateX(-50%);width:7.55rem;margin-bottom:1.35rem"/>
				<div class="aui-margin-t-10" style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:#B3B3B3;;">
					暂无内容
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				id: 0,
				page: 1,
				loadmore: true,
				info: [],
				localcity:{"id":2608,"parentid":235,"categoryname":"平邑县","spell":"pingyixian","first_letter":"P"}
			},
			methods: {
				get_list: function() {
					console.log(JSON.stringify({
						good_type_id: vm.id,
						page: vm.page,
						region_name:vm.localcity.categoryname
					}))
					get_data('api/score/GoodList', {
						good_type_id: vm.id,
						page: vm.page,
						region_name:vm.localcity.categoryname
					}, function(ret) {
						console.log(JSON.stringify(ret))
						if(ret.status) {
							vm.good_sign = ret.good_sign
							if(ret.data.length < 20) {
								vm.loadmore = false
							}
							ret.data.forEach(function(el) {
								vm.info.push(el)
							})
						}
					})
				},
				price_format: function(type, price) {
					var status = (price + '').indexOf('.')
					if(status == '-1') {
						if(type == 'yuan') {
							return price;
						}
						if(type == 'fen') {
							return '00';
						}
					}
					var price_array = (price + '').split('.')
					if(type == 'yuan') {
						return price_array[0];
					}
					if(type == 'fen') {
						var price_fen = price_array[1].length < 2 ? price_array[1] + '0' : price_array[1];
						return price_fen;
					}
				}
			},
			filters:{
				valueSlice(value){
					return value.slice(0,25)+'...'
				}
			},
		})
		apiready = function() {
			vm.id = $api.getStorage('good_type_id');
			$api.rmStorage('good_type_id')
			//2022年3月22日23:19:47
			var temp_localcity = api.getPrefs({
					sync: true,
					key: 'localcity'
			});

			if (temp_localcity) {
					vm.localcity = JSON.parse(temp_localcity);
			}
			api.addEventListener({
					name: 'jobRefresh'
			}, function(ret, err) {
					localcity(function(ret) {
							if (ret) {
									vm.localcity = ret;
									vm.get_list()
							}
					})
			});

			vm.get_list()
			fnInitPullRefresh(function() {
				vm.page = 1;
				vm.loadmore = true
				vm.info = [];
				vm.get_list()
			})
			// 新版刷新
		refresh_new(function() {
			setTimeout(function() {
				vm.page = 1;
				vm.loadmore = true
				vm.info = [];
				vm.get_list()
				api.refreshHeaderLoadDone()
			}, 1000)
		})


			fnInitScrollToBottom(function() {
				vm.page++;
				vm.get_list()
			})
			add_event('goods_sign', function(ret) {
				vm.sign = ret.sign
				vm.page = 1;
				vm.loadmore = true
				vm.info = [];
				vm.get_list()
			})
		};
	</script>

</html>
